<!--<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传页面</title>
</head>-->

#@layer()

#define css()

<!--全局样式-->
<style type="text/css">
    #body{
        background-image: url(http://47.105.208.60:8080/wechat-api/images/loginbg.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
    form#index {
        margin-left:auto;
        margin-right:auto;
        max-width: 500px;
        background: #F7F7F7;
        opacity:0.95;
        padding: 25px 15px 25px 10px;
        font: 12px Georgia, "Times New Roman", Times, serif;
        color: #888;
        text-shadow: 1px 1px 1px #FFF;
        border:1px solid #E4E4E4;
        text-align:center;
    }
    form#index h3 {
        font-size: 25px;
        padding: 0px 0px 10px 40px;
        display: block;
        border-bottom:1px solid #E4E4E4;
        margin: -10px -15px 30px -10px;;
        color: #888;
        text-align:center;
    }
    form#index label {
        display: block;
        margin: 0px;
    }
    form#index label>span {
        float: left;
        width: 20%;
        text-align: right;
        padding-right: 10px;
        margin-top: 10px;
        color: #888;
    }
    form#index input[type="text"], form#index input[type="number"] {
        border: 1px solid #DADADA;
        color: #888;
        height: 30px;
        margin-bottom: 16px;
        margin-right: 6px;
        margin-top: 2px;
        outline: 0 none;
        padding: 3px 3px 3px 5px;
        width: 70%;
        font-size: 12px;
        line-height:15px;
        box-shadow: inset 0px 1px 4px #ECECEC;
        -moz-box-shadow: inset 0px 1px 4px #ECECEC;
        -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
    }
    form#index .button {
        background: #E27575;
        border: none;
        padding: 10px 25px 10px 25px;
        color: #FFF;
        box-shadow: 1px 1px 5px #B6B6B6;
        border-radius: 3px;
        text-shadow: 1px 1px 1px #9E3F3F;
        cursor: pointer;
    }
    form#index label .container{
        width: 300px;
        height: 30px;
        background-color: greenyellow;
        margin-left:auto;margin-right:auto;

    }
    form#index label>span #progress{
        height: 20px;
        background-color: darkgray;
        display: inline-block;
        padding:3px 0 0 0;

    }

</style>
#end

#define script()
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>

<script>
    //图片上传
    window.onload=function(){
        var pid = window.opener.document.getElementById("eid").value;
        document.getElementById("id").value = pid;
    }

    function sctp() {

        var formData = new FormData();
        formData.append("files", $("#tp")[0].files[0]);

        $.ajax({
            url: "http://47.105.208.60:8080/wechat-api/upload",
            //url:  "http://localhost:8080/wechat-api/upload",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType:"json",
            mimeType:"multipart/form-data",
            xhr: function(){
                //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    //检查upload属性是否存在
                    //绑定progress事件的回调函数
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                }
                return myXhr; //xhr对象返回给jQuery使用
            },
            success : function(data) {
                console.log("+++++++++++")
                console.log("++++"+data.responseText)
                if (data != "") {
                    //$("#picture").value=data.responseText;
                    document.getElementById("picture").value=data.responseText;

                } else {
                    showError(data.msg);
                }
                //  uploading = false;
            },error: function(err){
                console.log("---------------")
                console.log(err)
                document.getElementById("picture").value=err.responseText;
                alert(err.responseText)
            }
        });

    }
    //上传进度回调函数：
    function progressHandlingFunction(e) {
        if (e.lengthComputable) {
            $('#progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条
            var percent = e.loaded/e.total*100;
            $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
            $('#progress').css('width', percent.toFixed(2) + "%");
        }
    }

    //图片在线预览
    function preview(file) {
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" style="width: 300px;height: 300px"/>';
            }
            reader.readAsDataURL(file.files[0]);
        } else {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }

    //数据提交
    function insert() {
        if(index.id.value==""){
            alert("编号不能为空,请输入当前代言家庭编号!")
            return false;
        }else if(index.picture.value==""){
            alert("图片还未上传!")
            return false;
        }/*else if(index.explain.value==""){
         alert("文字说明不能为空")
         return false;
         }*/
        $.ajax({
            url: "http://47.105.208.60:8080/wechat-api/file/saveFile",
            //url:"http://localhost:8080/wechat-api/file/saveFile",
            data:
                JSON.stringify($('#index').serializeJSON()),
            type: 'POST',
            dataType: "json",
            contentType:"application/json",
            success : function(data) {
                console.log("+++++++++")

                alert("提交成功")
                window.close()

            },error: function(err){
                console.log("----------")
                console.log(err)
                alert("提交失败")
                window.close()
            }
        });
    }
</script>
#end
<!--
<body>-->


#define content()
<div id="body" class="content-wrapper">
<form id="index" onsubmit="return false" action="##" method="post" enctype="multipart/form-data">

    <label>
        <span>编号:</span>
        <input type="text" name="id" class="id" id="id">
    </label>
    <label>
        <span>图片:</span>

        <input type="file" name="tp" class="tp" id="tp" accept="image/*" onchange="preview(this)"><br><br>

        <!--在线预览图-->
        <label id="preview"></label>
        <!--上传进度条-->
        <label class='container' >
            <span id="progress" ></span>
        </label>
        <br><br>
        <label>

        </label>
        <input type="button" value="上传图片" onclick="sctp()">
        &nbsp;&nbsp;&nbsp;<input type="reset" value="重新选择"/><br>
        <input type="text" name="picture" class="picture" id="picture" style="display: none">
    </label><br>
    <label>
        <span>图片说明:</span>
        <input type="text" name="explain" class="explain" id="explain">
    </label>

    <input  type="button" class="button" value="提交" onclick="insert()">
</form>
</div>
#end
<!--
</body>
</html>-->
